<!-- App.vue -->
<template>
  <div class="app">
    <h1>Vue3 + TypeScript 滑动标签页组件</h1>
    
    <TabsComponent
      v-model:activeKey="activeKey"
      :tabs="tabs"
      @tab-click="handleTabClick"
      @tab-close="handleTabClose"
      @change="handleChange"
    >
      <template #tab-pane-tab1>
        <div class="custom-content">
          <h2>标签页 1 的自定义内容</h2>
          <p>这里可以放置任何自定义内容</p>
          <button @click="addTab">添加新标签</button>
        </div>
      </template>
      
      <template #tab-pane-tab2>
        <div class="custom-content">
          <h2>标签页 2 的自定义内容</h2>
          <img src="https://via.placeholder.com/300x200" alt="示例图片" />
        </div>
      </template>
      
      <template #tab-pane-tab3>
        <div class="custom-content">
          <h2>标签页 3 的自定义内容</h2>
          <ul>
            <li>支持自定义内容</li>
            <li>支持触摸滑动</li>
            <li>支持标签关闭</li>
            <li>支持禁用状态</li>
          </ul>
        </div>
      </template>
    </TabsComponent>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TabsComponent from '../components/Tabs.vue'
import type { TabItem } from '../components/Tabs.vue'

const activeKey = ref('tab1')

const tabs = ref<TabItem[]>([
  { 
    key: 'tab1', 
    label: '首页', 
    closable: false,
  },
  { 
    key: 'tab2', 
    label: '产品', 
    closable: true,
    tag: { text: 'NEW', type: 'primary' }
  },
  { 
    key: 'tab3', 
    label: '服务', 
    closable: true,
    tag: { text: '推荐', type: 'success' }
  },
  { 
    key: 'tab4', 
    label: '禁用标签', 
    disabled: true,
    tag: { text: '维护', type: 'warning' }
  },
  { 
    key: 'tab5', 
    label: '关于我们', 
    closable: true,
    tag: { text: '99+', color: '#722ed1' }
  },
  { 
    key: 'tab6', 
    label: '联系我们', 
    closable: true 
  },
  { 
    key: 'tab7', 
    label: '帮助中心', 
    closable: true,
    tag: { text: 'BETA', type: 'default' }
  },
  { 
    key: 'tab8', 
    label: '用户反馈', 
    closable: true,
    tag: { text: '5', type: 'danger' }
  }
])

const handleTabClick = (tab: TabItem, index: number) => {
  console.log('标签点击:', tab, index)
}

const handleTabClose = (tab: TabItem, index: number) => {
  console.log('标签关闭:', tab, index)
  tabs.value.splice(index, 1)
  if (activeKey.value === tab.key && tabs.value.length > 0) {
    activeKey.value = tabs.value[0].key as string
  }
}

const handleChange = (activeKey: string | number, prevKey: string | number) => {
  console.log('标签切换:', activeKey, '上一个:', prevKey)
}

const addTab = () => {
  const newKey = `tab${Date.now()}`
  tabs.value.push({
    key: newKey,
    label: `新标签 ${tabs.value.length + 1}`,
    closable: true
  })
  activeKey.value = newKey
}
</script>

<style>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.custom-content {
  padding: 20px;
}

.custom-content h2 {
  margin-top: 0;
  color: #333;
}

.custom-content button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.custom-content button:hover {
  background: #40a9ff;
}
</style>